function $(selector) {
  return document.querySelector(selector);
}

function $$(selector) {
  return document.querySelectorAll(selector);
}

const chessboard = $(".chessboard");
let isGameOver = false;
const col = 14;
const row = 14;
let whichOne = "white";
const chessArr = [];
function initChessboard() {
  let tableContent = "";
  for (let i = 0; i < col; i++) {
    let rowHTML = `<tr>`;
    for (let j = 0; j < row; j++) {
      rowHTML += `<td data-row=${i} data-line=${j}></td>`;
    }
    rowHTML += `</tr>`;
    tableContent += rowHTML;
  }
  chessboard.innerHTML = tableContent;
}

function bindEvent() {
  chessboard.addEventListener("click", function (e) {
    if (!isGameOver) {
      const temp = Object.assign({}, e.target.dataset);
      if (e.target.nodeName === "TD") {
        const tdw = (chessboard.clientWidth * 0.92) / col;
        // 确认用户落子究竟在四个角的哪一个角
        const positionX = e.offsetX > tdw / 2;
        const positionY = e.offsetY > tdw / 2;
        const chessPoint = {
          x: positionX ? parseInt(temp.line) + 1 : parseInt(temp.line),
          y: positionY ? parseInt(temp.row) + 1 : parseInt(temp.row),
          c: whichOne,
        };
        chessMove(chessPoint);
      }
    } else {
      if (window.confirm("是否要重新开始一局？")) {
        // 进行一些初始化操作
        chessArr = []; // 重置棋子的数组
        initChessboard(); // 重新绘制棋盘
        isGameOver = false;
      }
    }
  });
}

function chessMove(chessPoint) {
  // 绘制之前需要判断该位置是否有棋子
  if (!exist(chessPoint) && !isGameOver) {
    const newChess = `<div class="chess ${chessPoint.c}" 
      data-row=${chessPoint.y} data-line=${chessPoint.x}></div>`;

    // 正常情况
    if (chessPoint.x < row && chessPoint.y < col) {
      const tdPos = $(
        `td[data-row='${chessPoint.y}'][data-line='${chessPoint.x}']`
      );
      tdPos.innerHTML += newChess;
    }

    // 最右侧
    if (chessPoint.x === row && chessPoint.y < col) {
      const tdPos = $(
        `td[data-row='${chessPoint.y}'][data-line='${chessPoint.x - 1}']`
      );
      tdPos.innerHTML += newChess;
      tdPos.lastChild.style.left = "50%";
    }

    // 最下侧
    if (chessPoint.x < row && chessPoint.y === col) {
      const tdPos = $(
        `td[data-row='${chessPoint.y - 1}'][data-line='${chessPoint.x}']`
      );
      tdPos.innerHTML += newChess;
      tdPos.lastChild.style.top = "50%";
    }

    // 右下角
    if (chessPoint.x === row && chessPoint.y === col) {
      const tdPos = $(
        `td[data-row='${chessPoint.y - 1}'][data-line='${chessPoint.x - 1}']`
      );
      tdPos.innerHTML += newChess;
      tdPos.lastChild.style.top = "50%";
      tdPos.lastChild.style.left = "50%";
    }

    whichOne = whichOne === "white" ? "black" : "white";
    check();
  }
}

// 核对游戏是否结束
function check() {
  for (let i = 0; i < chessArr.length; i++) {
    const curChess = chessArr[i];
    let chess2, chess3, chess4, chess5;
    // 检查有没有横着的 5 个颜色一样的棋子
    chess2 = chessArr.find(function (item) {
      return (
        curChess.x === item.x + 1 &&
        curChess.y === item.y &&
        curChess.c === item.c
      );
    });
    chess3 = chessArr.find(function (item) {
      return (
        curChess.x === item.x + 2 &&
        curChess.y === item.y &&
        curChess.c === item.c
      );
    });
    chess4 = chessArr.find(function (item) {
      return (
        curChess.x === item.x + 3 &&
        curChess.y === item.y &&
        curChess.c === item.c
      );
    });
    chess5 = chessArr.find(function (item) {
      return (
        curChess.x === item.x + 4 &&
        curChess.y === item.y &&
        curChess.c === item.c
      );
    });
    if (chess2 && chess3 && chess4 && chess5) {
      // 进入此 if，说明游戏结束
      end(curChess, chess2, chess3, chess4, chess5);
    }

    // 检查有没有竖着的 5 个颜色一样的棋子
    chess2 = chessArr.find(function (item) {
      return (
        curChess.x === item.x &&
        curChess.y === item.y + 1 &&
        curChess.c === item.c
      );
    });
    chess3 = chessArr.find(function (item) {
      return (
        curChess.x === item.x &&
        curChess.y === item.y + 2 &&
        curChess.c === item.c
      );
    });
    chess4 = chessArr.find(function (item) {
      return (
        curChess.x === item.x &&
        curChess.y === item.y + 3 &&
        curChess.c === item.c
      );
    });
    chess5 = chessArr.find(function (item) {
      return (
        curChess.x === item.x &&
        curChess.y === item.y + 4 &&
        curChess.c === item.c
      );
    });
    if (chess2 && chess3 && chess4 && chess5) {
      // 进入此 if，说明游戏结束
      end(curChess, chess2, chess3, chess4, chess5);
    }

    // 检查有没有斜着的 5 个颜色一样的棋子
    chess2 = chessArr.find(function (item) {
      return (
        curChess.x === item.x + 1 &&
        curChess.y === item.y + 1 &&
        curChess.c === item.c
      );
    });
    chess3 = chessArr.find(function (item) {
      return (
        curChess.x === item.x + 2 &&
        curChess.y === item.y + 2 &&
        curChess.c === item.c
      );
    });
    chess4 = chessArr.find(function (item) {
      return (
        curChess.x === item.x + 3 &&
        curChess.y === item.y + 3 &&
        curChess.c === item.c
      );
    });
    chess5 = chessArr.find(function (item) {
      return (
        curChess.x === item.x + 4 &&
        curChess.y === item.y + 4 &&
        curChess.c === item.c
      );
    });
    if (chess2 && chess3 && chess4 && chess5) {
      // 进入此 if，说明游戏结束
      end(curChess, chess2, chess3, chess4, chess5);
    }

    // 检查有没有斜着的 5 个颜色一样的棋子
    chess2 = chessArr.find(function (item) {
      return (
        curChess.x === item.x - 1 &&
        curChess.y === item.y + 1 &&
        curChess.c === item.c
      );
    });
    chess3 = chessArr.find(function (item) {
      return (
        curChess.x === item.x - 2 &&
        curChess.y === item.y + 2 &&
        curChess.c === item.c
      );
    });
    chess4 = chessArr.find(function (item) {
      return (
        curChess.x === item.x - 3 &&
        curChess.y === item.y + 3 &&
        curChess.c === item.c
      );
    });
    chess5 = chessArr.find(function (item) {
      return (
        curChess.x === item.x - 4 &&
        curChess.y === item.y + 4 &&
        curChess.c === item.c
      );
    });
    if (chess2 && chess3 && chess4 && chess5) {
      // 进入此 if，说明游戏结束
      end(curChess, chess2, chess3, chess4, chess5);
    }
  }
}

function end() {
  console.log("end结束");
  if (!isGameOver) {
    isGameOver = true; // 代表游戏结束

    // 1. 把所有的棋子标记出来
    for (let i = 0; i < chessArr.length; i++) {
      $(
        `div[data-row='${chessArr[i].y}'][data-line='${chessArr[i].x}']`
      ).innerHTML = i + 1;
    }

    // 2. 把获胜的棋子加上一个红色阴影
    for (let i = 0; i < arguments.length; i++) {
      $(
        `div[data-row='${arguments[i].y}'][data-line='${arguments[i].x}']`
      ).classList.add("win");
    }
  }
}

function exist(chessPoint) {
  return chessArr.find(
    (v) => v.x === chessPoint.x && v.y === chessPoint.y && x.c === chessPoint.c
  );
}

function main() {
  initChessboard();
  bindEvent();
}

main();
